<template xmlns:border-radius="http://www.w3.org/1999/xhtml">
<div style="width: 1200px;margin: 0 auto">
  <el-row>
    <el-tabs type="border-card" @tab-click="handleSelect2" v-model="activeTab" >
      <el-tab-pane label="美景探索" name="first"></el-tab-pane>
      <el-tab-pane label="酒店住宿" name="second"></el-tab-pane>
      <el-tab-pane label="精品定制路线" name="third"></el-tab-pane>

      <el-card v-for="l in list" style="margin-top: 20px">
        <el-col :span="8">
          <img :src="l.imgUrl" style="width: 350px;height: 200px;" @click="jump(l.id)">
        </el-col>
        <el-col :span="16">
          <div style="position: relative">
            <p style="font-size: 25px">{{ l.name }}</p>
            <el-divider></el-divider>
            <p class="info" style="font-size:20px">{{ l.brief }}</p>
            <p class="info" style="font-size:20px">{{ l.intro }}</p>
            <p style="color:#0f294d;" v-if="l.phone!=null">联系方式：{{ l.phone }}</p>
          </div>
        </el-col>


      </el-card>
    </el-tabs>
  </el-row>
  <el-pagination
      @current-change="changePage"
      layout="total, prev, pager, next"
      :hide-on-single-page="true"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
  </el-pagination>

</div>
</template>

<script>
export default {
  name: "DetailsView",
  data() {
    return {
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: '',
      total:'',
      activeTab: '',
      list: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      radio1: '',
      radio2: '',
      radio3: '',
      radio4: '',
    }
  },
  methods: {
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.handleSelect2(tab);
    },
    jump(id) {
      if (this.activeTab == "first") {
        this.$router.push('/spot?id=' + id)
      } else if (this.activeTab == "second") {
        this.$router.push('/hotel?id=' + id)
      } else {
        this.$router.push('/route?id=' + id)
      }

    },
    handleSelect1(key, keyPath) {
    },

    handleSelect2(tab) {
      console.log("-----------------------------")
      console.log(tab.name)
      console.log("-----------------------------")
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      if (tab.name == "first") {
        let url = 'http://localhost:8080/v1/spots/listAll?page=1&queryType=all';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
            .get(url).then((response) => {
          let jsonResult = response.data;
          console.log(jsonResult)
          if (response.data.code == 1) {
            this.list = jsonResult.data;
          }
        })
      }
      if (tab.name == "second") {
        let url = 'http://localhost:8080/v1/hotels/hotelsList';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
            .get(url).then((response) => {
          let jsonResult = response.data;
          console.log(jsonResult)
          if (response.data.code == 1) {
            this.list = jsonResult.data;
            console.log(this.list)
            this.activeTab='second'
          }
        })
      }
      if (tab.name == "third") {
        let url = 'http://localhost:8080/v1/routes/list?page=1&queryType=all';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
            .get(url).then((response) => {
          let jsonResult = response.data;
          console.log(jsonResult)
          if (response.data.code == 1) {
            this.list = jsonResult.data.list;
          }
        })
      }
    },

  },
  mounted() {
    let type = new URLSearchParams(location.search).get("type");
    if (type == "spots"){
      let url = 'http://localhost:8080/v1/'+type+'/listAll?page=1&queryType=all';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult)
        if (response.data.code == 1) {
          this.list = jsonResult.data;
          this.activeTab='first'
        }
      })
    }else if (type=="hotels"){
      let url = 'http://localhost:8080/v1/'+type+'/hotelsList';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult)
        if (response.data.code == 1) {
          this.list = jsonResult.data;
          console.log(this.list)
          this.activeTab='second'
        }
      })
    }else {
      let url = 'http://localhost:8080/v1/routes/list?page=1&queryType=all';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult)
        if (response.data.code == 1) {
          this.list = jsonResult.data.list;
          this.activeTab='third'
        }
      })
    }
  }
}
</script>

<style scoped>
.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
p{
  margin: 12px;
}

.info{
  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2; /*显示的行数；如果要设置2行加...则设置为2*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}
</style>